<template>
  <el-card shadow="never">
    <el-row :gutter="10">
      <el-col :span="14">
        <face-detector ref="faceDetector" width="640" height="480" @screenShot="handleScreenShot" />
      </el-col>
      <el-col :span="9" :offset="1">
        <el-form ref="registerForm" :model="recognition" label-width="110px">
          <el-form-item label="用户ID：">
            <!-- <el-input v-model="recognition.id" readonly /> -->
            <el-row>{{ recognition.id }}</el-row>
          </el-form-item>
          <el-form-item label="用户名：">
            <!-- <el-input v-model="recognition.username" :disabled="true" /> -->
            <el-row>{{ recognition.username }}</el-row>
          </el-form-item>
          <el-form-item label="人脸识别模型：">
            <!-- <el-input v-model="selectedFaceRecognitionModelLabel" :disabled="true" /> -->
            <el-row>{{ selectedFaceRecognitionModelLabel }}</el-row>
            <input v-model="selectedFaceRecognitionModelValue" type="hidden">
          </el-form-item>
          <el-form-item label="活体检测：">
            <!-- <el-input v-model="antiSpoofingStatus" :disabled="true" /> -->
            <el-row>{{ antiSpoofingStatus }}</el-row>
            <input v-model="turnOnAntiSpoofing" type="hidden">
          </el-form-item>
          <el-form-item label="自动识别：">
            <el-switch v-model="recognition.autoRecognition" @change="switchAutoRecognition" />
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="onRecognition">识别</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { mapState } from 'vuex'
import FaceDetector from '@/components/FaceDetector'
import { faceRecognition } from '@/api/face'

export default {
  name: 'Recognition',
  components: {
    FaceDetector
  },
  data() {
    return {
      recognition: {
        id: '',
        username: '',
        autoRecognition: false
      },
      antiSpoofingStatus: '',
      timer: ''
    }
  },
  computed: {
    ...mapState({
      selectedFaceRecognitionModelLabel: state => state.setting.selectedFaceRecognitionModelLabel,
      selectedFaceRecognitionModelValue: state => state.setting.selectedFaceRecognitionModelValue,
      turnOnAntiSpoofing: state => state.setting.turnOnAntiSpoofing
    })
  },
  created() {
    this.$store.dispatch('setting/getSelectedFaceRecognitionModel')
    this.$store.dispatch('setting/getTurnOnAntiSpoofing')
  },
  mounted() {
    if (this.turnOnAntiSpoofing) {
      this.antiSpoofingStatus = '已开启'
    } else {
      this.antiSpoofingStatus = '已关闭'
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    switchAutoRecognition() {
      if (this.recognition.autoRecognition) {
        this.timer = setInterval(this.onRecognition, 1000)
      } else {
        clearInterval(this.timer)
      }
    },
    handleScreenShot(photo) {
      // console.log(photo)
      if (!photo) {
        this.$message.error('No face detected!')
        return
      }
      const data = {
        'photo': photo,
        'selected_face_recognition_model_value': this.selectedFaceRecognitionModelValue,
        'turn_on_anti_spoofing': this.turnOnAntiSpoofing
      }
      faceRecognition(data).then(res => {
        this.recognition.id = res.data.id
        this.recognition.username = res.data.username
      })
    },
    onRecognition() {
      this.$refs.faceDetector.takeScreenShot()
    }
  }
}
</script>
